<template>
  <div class="app-container">
    <div class="draft" style="height: 100%" v-show="!showForm">
      <div>
        <!-- 列表 -->
        <div style="marginBottom: 1rem">
          <el-input
            v-model="encodeName"
            placeholder="请输入要查询的编码名称"
            size="small"
            style="width: 15.5rem"
          >
          </el-input>
          <el-button
            style="marginLeft: .625rem"
            type="primary"
            size="small"
            @click="searchChange"
            >搜索</el-button
          >
          <el-button style="marginleft: .625rem" size="small" @click="reset"
            >重置</el-button
          >
          <div style="float: right">
            <el-button type="primary" @click="addCoding">新增</el-button>
            <el-button
              size="small"
              @click="multiDel"
              :disabled="selectionLength === 0"
              >批量删除</el-button
            >
            <el-tooltip class="item" effect="dark" content="显隐" placement="top">
              <el-button icon="el-icon-s-operation" circle @click="drawerClick('parent')"></el-button>
            </el-tooltip>
          </div>
        </div>
        <div v-if='timeTemp'>
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          style="width: 100%; marginBottom: 1.25rem"
          size="small"
          @selection-change="handleSelectionChange"
          v-loading="tableLoading"
          class="tableInfo"
          row-key="formId"
        >
          <el-table-column
            type="selection"
            width="80"
            align="center"
            :reserve-selection="true"
          >
          </el-table-column>
          <el-table-column label="序号" width="80" align="center" v-if='!showHideData[0].hide'>
            <template slot-scope="scope">
              <span>{{
                scope.$index + (page.pageNo - 1) * page.pageSize + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码编号"  align="center" prop='encodeNum' v-if='!showHideData[1].hide'>
          </el-table-column>
          <el-table-column label="编码名称" align="center" prop='encodeName' v-if='!showHideData[2].hide'>
          </el-table-column>
          <el-table-column label="创建人"  align="center" prop='createName' v-if='!showHideData[3].hide'>
          </el-table-column>
          <el-table-column label="创建时间"  align="center" v-if='!showHideData[4].hide'>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="editData(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="text"
                style="color: red"
                @click="delData(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <el-pagination
          background
          :layout="layout"
          :total="pageTotal"
          :page-size="page.pageSize"
          :page-sizes="pageSizes"
          :current-page="page.pageNo"
          style="float: right"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="visible">
      <AddDialog ref="add" @closeDialog="visible = false,editRow=null" :codingType='codingType' :editRow='editRow' @getList='getList'  :childShowHideDate='childShowHideDate'/>
    </div>
     <!-- 列显隐 -->
    <el-drawer :visible.sync="drawer" direction="rtl">
      <span slot="title" style="fontSize:18px;font-weight:500;color: #262626;">列显隐</span>
      <el-table :data="isChild?childShowHideDate:showHideData" size="small" border style="width:80%;marginLeft:10%;">
        <el-table-column prop="columnName" label="列名" align="center">
        </el-table-column>
        <el-table-column prop="hide" label="隐藏" align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.hide"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {
  getMainList,
  deleteAutoCode,
  batchDeleteCode
} from "@/api/custom/autoCoding";
import AddDialog from "./component/AddDialog.vue";
export default {
  components: {
    AddDialog,
  },
  data() {
    return {
      tableLoading: false,
      showForm: false, //表单新增、编辑、查看页面
      encodeName: "", //关键字搜索
      tableData: [],
      layout: "prev, pager, next,sizes,jumper", //分页显示布局
      pageSizes: [10, 15, 20], //分页显示每页条数选择
      pageTotal: 3,
      page: {
        pageNo: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      multipleSelection: [],
      tableName: "",
      visible: false,
      drawer:false,
      codingType:'',
      editRow:null,
      timeTemp:Date.now(),
      isChild:false,
      showHideData: [{
            columnName: '序号',
            hide: false
          },
          {
            columnName: '编码编号',
            hide: false
          },
          {
            columnName: '编码名称',
            hide: false
          },
          {
            columnName: '创建人',
            hide: false
          },
          {
            columnName: '创建时间',
            hide: false
          }
        ],
      childShowHideDate:[
        {
          columnName: '#',
            hide: false
        },
        {
            columnName: '前缀',
            hide: false
          },
          {
            columnName: '格式',
            hide: false
          },
          {
            columnName: '步长',
            hide: false
          },
          {
            columnName: '初始值',
            hide: false
          },
          {
            columnName: '说明',
            hide: false
          }
      ],
      isWhoKey:[]
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    selectionLength() {
      return this.multipleSelection.length;
    },
  },
  methods: {
    drawerClick(val) {
      this.drawer=true
      this.isChild=val==='child'?true:false
      if(val==='parent'){

      }
    },
    editData(val){
      this.visible = true;
      this.codingType='editCode'
      this.editRow=val
    },
    addCoding() {
      this.visible = true;
      this.codingType='addCode'
    },
    //取消按钮
    cancelForm() {
      this.showForm = false;
    },
    getList() {
      this.tableLoading = true;
      let params = {
        ...this.page,
        encodeName: this.encodeName,
      };
      getMainList(params)
        .then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.list;
            this.pageTotal = res.data.total;
            this.tableLoading = false;
            this.tableName = JSON.parse(res.data.formJsonData).tableName;
          }
        })
        .catch((e) => {
          this.tableLoading = false;
        });
    },
    //将数据库存储类型转为组件数据类型
    //时间戳转日期时间
    searchChange() {
      this.page.pageNo = 1;
      this.getList();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.page.pageNo = 1;
      this.getList();
    },
    currentChange(current) {
      this.page.pageNo = current;
      this.getList();
    },
    reset() {
      this.encodeName = "";
      this.searchChange();
    },
    delData(row) {
      //删除
      let ids = [];
      ids.push(row.formRecordId);
      const that = this;
      this.$modal
        .confirm("确定删除！")
        .then(function () {
          deleteAutoCode(row.id).then((response) => {
            that.$modal.msgSuccess("删除成功");
            that.getList();
          });
        })
        .catch(() => {});
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除数据
    multiDel() {
      let data = [];
      this.multipleSelection.map((item) => {
        data.push(item.id);
      });
      batchDeleteCode(data).then((res) => {
        if (res.code === 0) {
          this.$message.success("删除成功");
          this.multipleSelection = [];
          this.tableLoading = true;
          this.page.pageNo = 1;
          this.$refs.multipleTable.clearSelection();
          this.getList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.explicit {
  width: 1.875rem;
  height: 1.875rem;
  border: .0625rem solid grey;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-left: .625rem;
  line-height: 1.75rem;
  vertical-align: middle;
  font-size: 1rem;
}
</style>
